<template>
  <div>
    <basic-container>
      <avue-data-tabs :option="option"></avue-data-tabs>
    </basic-container>
    <basic-container>
      <div style="height: 34px"><strong>常见问题</strong></div>
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item title="忘记密码怎么办？" name="1">
          <div>由于系统采用MD5加密的方式储存用户密码，用户忘记密码后，无法找回原密码。可以联系社长或者系统管理员进行密码重置。</div>
        </el-collapse-item>
        <el-collapse-item title="如何修改姓名？" name="2">
          <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
          <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
        </el-collapse-item>
        <el-collapse-item title="文章发布不成功怎么办？" name="3">
          <div>简化流程：设计简洁直观的操作流程；</div>
          <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
          <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
        </el-collapse-item>
        <el-collapse-item title="代办事件怎么设置？" name="4">
          <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
          <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
        </el-collapse-item>
      </el-collapse>
    </basic-container>
  </div>
</template>

<script>

  import {fetchTotal} from '@/api/wel'

  export default {
    data() {
      return {
        totalData: [],
        activeName: '1',
        option: {
          data: [
            {
              click: function (item) {
                //alert(JSON.stringify(item));
              },
              title: '会员统计',
              subtitle: '人',
              count: 0,
              // allcount: 6,
              text: '当前用户总数',
              color: 'rgb(27, 201, 142)',
              key: 'vip'
            },
            {
              click: function (item) {
                //alert(JSON.stringify(item));
              },
              title: '文章统计',
              subtitle: '篇',
              count: 0,
              // allcount: 100,
              text: '当前上传的文章数',
              color: 'rgb(230, 71, 88)',
              key: '章'
            },
            {
              click: function (item) {
                //alert(JSON.stringify(item));
              },
              title: '评论统计',
              subtitle: '条',
              count: 103,
              // allcount: 233,
              text: '评论次数',
              color: 'rgb(178, 159, 255)',
              key: '评'
            }
          ]
        }
      }
    },
    created() {
      fetchTotal().then(response => {
        if (response.data.code === 0) {
          this.option.data[0].count = response.data.data.memberTotalNum
          this.option.data[1].count = response.data.data.articleTotalNum
          this.totalData = response.data.data
        }
        console.log(response);
      });
    }
  }
</script>

